import {Map,View,Feature} from 'ol';
import TileLayer from 'ol/layer/Tile';
import Point from 'ol/geom/Point.js';
import {Vector as VectorLayer} from 'ol/layer.js';
import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style.js';

import XYZ from 'ol/source/XYZ';
// var vectorSource = new ol.source.Vector({});
import VectorSource from 'ol/source/Vector.js';

var map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            source: new XYZ({
                url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                // url: 'libs/鱼化寨街道/鱼化寨街道_大图/{z}/{x}/{y}.png'
            })
        })
    ],
    view: new View({
        center: [0, 0],
        zoom: 2
    })
});

map.on('click', function (e)
{

    console.log(e.coordinate);
    var geoMarker = new Feature({
        type: 'geoMarker',
        geometry: new Point(e.coordinate)
    });
    var styles = {
        'geoMarker': new Style({
            image: new CircleStyle({
                radius: 7,
                fill: new Fill({color: 'black'}),
                stroke: new Stroke({
                    color: 'white', width: 2
                })
            })
        })
    };
    var vectorLayer = new VectorLayer({
        source: new VectorSource({
            features: [geoMarker]
        }),
        style: function(feature) {
            // hide geoMarker if animation is active
            // if (animating && feature.get('type') === 'geoMarker') {
            //     return null;
            // }
            console.log(feature);
            return styles[feature.get('type')];
        }
    });
    map.addLayer(vectorLayer);
    console.log('456');
});


